<template>
  <!-- 本周任务 -->
  <div class="weekTask-box">
    <!-- ------------------------日历-------------------------- -->
    <div class="calendar-box">
        <!-- 获取当前是第几周 -->
        <div class="nowWeek">
            <p>{{getYearWeek()}}</p>
            <div class='btn-box'>
                <el-button class="allBtn" size="mini" round :class="isAllData?'isActive':''" @click="getAllData">我负责的</el-button>
                <el-button class="allBtn" size="mini" round :class="isParticipate?'isActive':''" 
                @click="getParticipate">我参与的</el-button>
            </div>
        </div>
        <!-- 日历 -->
        <el-calendar ref="calendarDate" v-model="dateValue" :range="weekStartTime?[weekStartTime,weekEndTime]:[]">
            <template  slot="dateCell" slot-scope="{ data }">
                <div
                @click="viewDayWork(data)"
                :class="data.isSelected ? 'is-selected' : ''"
            ><span>{{ data.day.split('-')[2] }}</span></div>
           </template>
        </el-calendar>
    </div>
    <!-- ------------------------日历------------------------end -->

    <!-- ------------------------任务列表------------------------ -->
    <div class="taskList">
        <ul v-if="taskList.length">
            <!-- 任务 -->
            <li v-for="(task,index) in taskList" :key="index" :class="getTaskClass(task,index)">
                <el-popover placement="right-end" width="320" trigger="click" :visible-arrow="false" popper-class="knownCard" :ref="`taskCard${index}`" @show="showPopover(index)">
                    <!-- 弹出的卡片 -->
                    <KnownCard :cardData="task" :ref="`knownCard${index}`" @refreshList="refreshList" @closeCard="closeCard(index)" @againPlace="againPlace(index)"></KnownCard>

                    <!-- 点击的区域 -->
                    <div class="item-box" slot="reference">
                        <!-- <svg-icon icon-class="taskL" /> -->
                        <div class="item-right">
                            <!-- 标题 -->
                            <div class="item-title">
                                <h3>{{task.name}}</h3>
                                <!-- <i class="el-icon-arrow-right"></i> -->
                                <div class="actor">
                                    <el-popover placement="bottom" width="50" trigger="hover" popper-class="tableFn-btn">
                                        <div class="popover-btn">
                                            <el-button @click="editDisplay(task,index)">{{isShow(task) ? '显示':'隐藏'}}</el-button>
                                            <el-button @click="changeStatus(task,0)">完成</el-button>
                                            <el-button @click="changeStatus(task,1)">取消</el-button>
                                        </div>
                                        <p class="edit_more" slot="reference">
                                            <i class="el-icon-more"></i>
                                        </p>
                                    </el-popover>
                                </div>
                            </div>
                            <!-- 时间 -->
                            <div class="item-time">
                                <span class="name">目标：{{task.targetName}}&nbsp;&nbsp;&nbsp; 参与者：{{getUserListName(task)}}</span>
                                <!-- <span class="userName">
                                    参与者：{{getUserListName(task)}} -->
                                    <!-- <svg-icon icon-class="person_icon" v-if="getUserListNum(task)"/>
                                    <svg-icon icon-class="persons_icon" v-else/> -->
                                <!-- </span> -->
                            </div>
                        </div>
                    </div>
                </el-popover>
                  <!-- 已完成和已取消显示的图标 -->
                <div class="okOrCancel" >
                    <!-- v-if="getTaskIcon(task)" -->
                    <!-- 已完成 -->
                    <svg-icon class="isOkOrCancel" icon-class="isOk"  v-if="getTaskOkIcon(task)"/>
                    <!-- 已取消 -->
                    <svg-icon class="isOkOrCancel" icon-class="isCancel" v-else-if="getTaskCancelIcon(task)"/>
                </div>
            </li>
        </ul>
        <!-- 无数据 -->
        <div class="noData-box" v-else>
            <img src="~@/assets/images/wjg_img@2x.png" alt="">
            <p>暂无数据</p>
        </div>
          <!-- 底部任务数量 {{ getFinishNum() }}/ -->
      <el-button class="taskNum"
        >任务总数({{ taskList.length }})</el-button
      >
    </div>
    <!-- ------------------------任务列表------------------------end -->
  </div>
</template>

<script>
import debounce from "lodash/debounce";
import KnownCard from "../today/knownCard.vue"
import {getServiceActionTaskListApi,taskDisplayApi,updateTodayStatusApi,updateStatusActionTaskApi} from "@/BMViews/api/service/actionTask.js"
import {transferTime,timestampToTime,getTimeFormat,getWeek} from "@/wss/utils/wss.js"
export default {
    name: 'weekTask',
    components:{KnownCard},
    data(){
        return{
            // ----------日历---------
            dateValue: '', //当前日期
            weekStartTime: '',//当前选择这周第一天
            weekEndTime: '',//当前选择这周最后一天
            isAllData: true,// 是否是本周全部
            isParticipate:false,//是否是本周我参与的
            // ----------日历---------end

            // ----------任务---------
            taskList: [],//当前任务列表
            // ----------任务---------end
        }
    },
    watch:{
        // 监听选择时间的变化
       async dateValue(){
            if(this.dateValue) {
                console.log(this.dateValue,'this.dateValue');
                // this.isAllData = false 
                if(this.isParticipate){
                    // 参与按钮高亮且单个时间有变化
                    this.getServiceActionTaskList(true) // 获取当前任务列表
                }else{
                    this.getServiceActionTaskList(true) // 获取当前任务列表
                }
            }
        },
    },
    mounted(){
        this.getWeekStartEnd() // 获取选择这周的第一天和最后一天
        this.getServiceActionTaskList() // 获取当前任务列表
        // 通过$bus刷新列表
        this.$bus.$on('refLeftList',(res)=>{

          let type = this.dateValue ? true :false
     
           this.getServiceActionTaskList(type,res) // 获取当前任务列表
          
        })
    },
    beforeDestroy() {
        //销毁
        this.$bus.$off('refLeftList')
    },
    methods:{
         // 修改当前任务隐藏
   async editDisplay(...arg){
      let id = this.$store.state.user.userId
      let index = arg[0].userList.findIndex(item=>{
          return item.userId == id
      })  
      let argument = {
        id:arg[0].id,
        display:!arg[0].userList[index].display
      }
      const res = await taskDisplayApi(argument)
        if(res.code==200){
            this.$message({message: res.msg, type: 'success'});
            if(this.isShow(arg[0])){
                  // 如果是显示操作，手动改为true
                  this.taskList[arg[1]].userList[index].display = true
              }else{
                  // 隐藏操作，剔除掉改item
                      this.taskList.splice(arg[1],1)
              }

         }
    },
     // 修改状态
    async changeStatus(row,type) {
      // console.log(row, "选择的结果");

      if (row.repeatDays == -1) {
        // 不重复修改状态
        await this.updateStatusActionTask(row,type); // 修改任务状态
        await this.updateTodayStatusFn(row,type); // 修改当天任务状态
      } else {
        // 重复的
        if (row.status == -1) {
          //取消状态
          await this.updateStatusActionTask(row,type); // 编辑一个任务的接口
          await this.updateTodayStatusFn(row,type); // 修改当天任务状态
        } else {
          await this.updateTodayStatusFn(row,type); // 修改当天任务状态
        }
      }
      if(this.dateValue){
        this.getServiceActionTaskList(true); // 查询当前选择的任务列表
      }else{
        this.getServiceActionTaskList(false); // 查询当前选择的任务列表

      }
     
    
      this.$message({ message: "编辑成功", type: "success" });
    },

    // 修改当天的任务状态接口
    async updateTodayStatusFn(row,type) {
      // --------------------传递修改状态参数的接口--------------------
      let status = type ==  0 ? 2 : -1
    
      let date = new Date();
      if(this.dateValue != ''){
            date = this.dateValue
      }else{
        date = transferTime(date)
      }
      let data = {
        status, //状态值
        // todayStatus: this.statusList[e.detail.value].value, //状态值
        targetId: row.targetId, //目标id
        taskId: row.id, //任务id
        taskDate:date, //编辑的任务时间 没有传就用当天时间
      };
      let res = await updateTodayStatusApi([data]);
    },

    // 修改任务状态的接口
    async updateStatusActionTask(row,type) {
        row.type = type == 0 ? 2 : -1
      let result = await updateStatusActionTaskApi([row]);
    },
     // 获取已完成的数量
    getFinishNum() {
      let num = 0;
      this.taskList.forEach((item) => {
        // 2是已完成
        if (item.todayStatus == 2) {
          num = num + 1;
        }
      });
      return num;
    },
        // ---------------------------------日历------------------------
        // 获取当前是第几周
        getYearWeek(){
            let date = new Date()
            let week = getWeek(date)
            return week
        },

        // 获取选择这周的第一天和最后一天
        getWeekStartEnd(){
            let date = new Date()
            //本周第一天
            let weekStartTime = new Date(new Date(date).getTime() - (3600 * 1000 * 24 * (new Date(date).getDay() == 0 ? 6 : new Date(date).getDay()-1)))
            //本周最后一天
            let weekEndTime = new Date(new Date(date).getTime()+(3600*1000*24* (new Date(date).getDay()==0 ? 0:7- new Date(date).getDay(date))))
            this.weekStartTime = transferTime(weekStartTime) //本周第一天
            this.weekEndTime = transferTime(weekEndTime) //本周最后一天
        },

        // 获取这周全部数据
       getAllData:debounce(async function(){
            this.isAllData = true //全部按钮高亮
            this.isParticipate=false//参与按钮
            // this.dateValue = '' //日历值清空
            if(this.dateValue){
                this.getServiceActionTaskList(true) // 获取本周选中的日期的任务列表
            }else{
                this.getServiceActionTaskList(false) // 获取本周全部任务列表
            }
           
            // await this.$nextTick()
            // let cale = document.querySelectorAll('.el-calendar .is-selected')
            // console.log(cale);
            // if(cale.length==0) return 
            // for (let i = 0; i < cale.length; i++) {
            //    cale[i].classList.remove('is-selected')
            // }
       },500), 
        // 获取参与的数据
        getParticipate:debounce(async function(){
            this.isParticipate=true//参与按钮高亮
            this.isAllData = false //全部按钮
            // this.dateValue = '' //日历值清空
            if(this.dateValue){
                this.getServiceActionTaskList(true) // 获取本周参与的选中的日期的任务列表
            }else{
                this.getServiceActionTaskList(false) // 获取本周全部参与任务列表
            }
           
            // await this.$nextTick()
            // let cale = document.querySelectorAll('.el-calendar .is-selected')
            // console.log(cale);
            // if(cale.length==0) return 
            // for (let i = 0; i < cale.length; i++) {
            //     cale[i].classList.remove('is-selected')
            // }
        },500),
         async  viewDayWork(data){
            // 点击显示高亮
            console.log(data,'data');
            // 点击是哪一天
            let day=data.day.split('-')[2]
            await this.$nextTick()
            // 获取所有dom
            let cale= document.querySelectorAll('.el-calendar-day div ')
             for (let i = 0; i < cale.length; i++) {
                // 判断改dom是不是我点击的那一天的dom
               if(cale[i].innerText==day){
                //给这一天添加高亮的类
                cale[i].classList.add('is-selected')
               } 
            }
        },
        // ---------------------------------日历------------------------end
        
        // ---------------------------------任务列表---------------------------------
        // 刷新任务列表
        refreshList(){
            this.getServiceActionTaskList() // 获取当前任务列表
        },

        // 关闭卡片的回调
        closeCard(index){
            this.$refs[`taskCard${index}`][0].doClose() //关闭
        },

        // 重新计算位置
        againPlace(index){
            this.$refs[`taskCard${index}`][0].updatePopper() //重新计算位置
        },

        // 不同类型获取的class背景不同
        getTaskClass(item,index){
            // 不同类型获取的class背景不同
            const stateMap = {
                1: "career",
                2: "friend",
                0: "health",
            };
            console.log(item.todayStatus,'------------');
            // 判断状态 已完成和已取消
            let status = ''
            if(item.repeatDays=='-1'){
                status = item.status
            }else{
                status = item.todayStatus
            }
            if(status=='2'||status=='-1'){
                console.log(stateMap[index % 3] + " " + "isLight",'111111111111');
                return stateMap[index % 3] + " " + "isLight"
            }else{
                return stateMap[index % 3]
            }
        },

        // 不重复和重复显示和隐藏图标
        getTaskIcon(item){
            if(item.repeatDays=='-1'){
                // 不重复
                return item.status=='2' || item.status=='-1'
            }else{
                // 重复
                return item.todayStatus=='2' || item.todayStatus=='-1'
            }
        },
        
        // 获取已完成的显示图标
        getTaskOkIcon(item){
            if(item.repeatDays=='-1'){
                // 不重复
                return item.status=='2'
            }else{
                // 重复
                return item.todayStatus=='2'
            }
        },
        
        // 获取已取消的显示图标
        getTaskCancelIcon(item){
            if(item.repeatDays=='-1'){
            // 不重复
            return item.status=='-1' || item.todayStatus == '-1'
            }else{
            // 重复
            return item.todayStatus=='-1' || item.status=='-1'
            }
        },

        // 获取当前任务列表
        async getServiceActionTaskList(isDay,keyword){
            let data = {
              going: true
            }
            if(isDay){
              data.taskDay = transferTime(this.dateValue) //当前选择的时间
              if(this.isParticipate){
                  data.participate=true
              }else{
                  data.principal=true
              }
            }else{
                data.startTime = this.weekStartTime,//开始时间
                data.endTime = this.weekEndTime//结束时间
                if(this.isParticipate){
                    data.participate=true
                }else{
                    data.principal=true
                }
            }
            if(keyword){
                data.searchText = keyword
                data.display = true
            }
            let result = await getServiceActionTaskListApi(data)
            console.log(result,'当前本周任务列表');
            if(result.code==200){
                this.taskList = result.rows
            }
        },

        // 获取参与者
        getUserListName(row){
            let userName = []
            row.userList.forEach(item => {
                // 过滤出已接受的
                // if(item.status=='0'){
                    // 如果是自己就只显示我就行
                    if(item.userId == this.$store.state.user.userId){
                        userName.push('我')
                    }else{
                        userName.push(item.name)
                    }
                // }
            });
            // if(userName.length>1){
            //     return '多人'
            // }else{
                // userName = ['sdesf','sfsfdsf','sfswefds','awefxdfd','aefdxzfe','asfdsfdgsdzg','sdfdsger','asdgfdcxd']
                return userName.join(',')
            // }
        },

        // 获取参与者 是显示单人图标还是多人图标
        getUserListNum(row){
            let userName = []
            row.userList.forEach(item => {
                // 过滤出已接受的
                if(item.status=='0'){
                    userName.push(item.name)
                }
            });
            if(userName.length > 1){
                return false
            }else{
                return true
            }
        },

        // 获取时间
        getTimeTxt(row){
            let startDay = getTimeFormat(timestampToTime(row.startDay))
            let endDay = getTimeFormat(timestampToTime(row.endDay))
            // if(startDay==endDay){
            //     return `${startDay} ${row.startTime}~${row.endTime}`
            // }else{
            //     return `${startDay} ${row.startTime}~${endDay} ${row.endTime}`
            // }
            return `${startDay} ${row.startTime}~${endDay} ${row.endTime}`
        },

        // 获取任务详情
        showPopover(index){
            this.$refs[`knownCard${index}`][0].getInfoServiceActionTask() // 获取当前点击的这个任务的详细数据
        },

        // 获取图标
        getItemSvg(task){
            if(task.status){
                // 有状态数据
                const stateMap = {
                    '-1': "wzd_icon", //取消
                    1: "wzd_icon", //未做到（未完成）
                    2: "zd_icon", //做到（完成）
                };
                return stateMap[task.status]
            }else{
                // 开始时间还没到就是未到期，开始时间到了就是未标记(红色的字)
                let start = timestampToTime(task.startDay) + task.startTime + ':00'
                let startDate = new Date(start).getTime()
                let nowDate = new Date().getTime()
                // console.log(startDate,nowDate,'获取状态的名字获取状态的名字');
                // 开始时间大于当前时间
                if(startDate>nowDate){
                    return 'wdq_icon'//未到期
                }else{
                    return 'wbj_icon'//未标记
                }
            }
        },
        // ---------------------------------任务列表---------------------------------end
         // -------------------------------搜索功能
        // 搜索相关功能
        isShow(e){
          let id = this.$store.state.user.userId
          let index =   e.userList.findIndex(item=>{
                return item.userId == id
          })
            return  !e.userList[index].display ? true : false
        }
    },
}
</script>

<style lang="scss" scoped>
ul,li,p{
    list-style: none;
    margin: 0;
    padding: 0;
}
.weekTask-box{
    height: 100%;
}
// 修改按钮的默认颜色
// .el-button:hover,
// .el-button:focus {
//   color: #fa7c21;
// }
// ------------日历样式------------
.calendar-box{
    margin: 0 30px;
    background-color: #f7f7f7;
    border-radius: 8px;
    padding: 15px;
    overflow: hidden;
    .nowWeek{
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
        font-size: 14px;
        .allBtn{
            padding: 4px 12px;
            background-color: transparent;
            &:hover{
                border-color: #DCDFE6;
                color: #606266;
            }
        }
        .isActive{
            border-color: #f87a23;
            color: #f87a23;
            &:hover{
                border-color: #f87a23;
                color: #f87a23;
            }
        }
    }
}
.el-calendar {
  position: relative;
  background-color: #f7f7f7;
  ::v-deep .el-calendar__header {
    display: none;
  }
  ::v-deep .el-calendar__body {
    padding: 0px;
  }
  ::v-deep .el-calendar-table {
    thead {
      th {
        font-size: 12px;
      }
    }
    td {
      border: 0;
      &:hover {
        background-color: transparent;
      }
    }
    .el-calendar-day {
      height: auto;
      text-align: center;
      font-size: 12px;
      span {
        display: block;
        margin: 0 auto;
        width: 24px;
        height: 24px;
        text-align: center;
        line-height: 24px;
      }
    }
    .is-selected {
      background-color: transparent;
      span {
        background-color: #F19B32;
        color: #fff;
        border-radius: 50%;
      }
    }
    .is-today {
      color: #f87a23;
    }
  }
}
// ------------日历样式------------end
// 底部任务数量
.taskNum {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f8f8f8;
  border: 0;
  border-top: 1px solid #ecedf0;
  padding: 15px;
  cursor:default;
    &:hover{
            color: #FA7C21;
          
        }
    &:focus{
          color: #FA7C21;
   
    }
}

// ------------列表------------
.taskList{
    padding-bottom: 50px;
    padding-top: 15px;
    height: calc(100% - 125px);
    overflow-y: auto;
    &::-webkit-scrollbar{
        width: 0;
    }
    li{
        position: relative;
        margin: 0 30px;
        padding: 15px;
        border-radius: 12px;
        margin-bottom: 15px;
        border: 1px solid #efefef;
        // border-bottom: 1px solid #efefef;
        cursor: pointer;
        h3{
            font-size: 15px;
            color: #333;
        }
        .item-box{
            display: flex;
            svg{
                font-size: 20px;
                margin-right: 10px;
            }
            .item-right{
                // width: calc(100% - 32px);
                width: 100%;
            }
        }
        .item-title{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            .actor{
                width: 20px;
                display: flex;
                justify-content: flex-end;
                margin-left: auto;
            }
            svg{
                font-size: 14px;
                margin-right: 5px;
            }
            h3{
                width: calc(100% - 20px);
                overflow:hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                -o-text-overflow:ellipsis;
            }
        }
        .item-time{
           
            // display: flex;
            // justify-content: space-between;
            font-size: 12px;
            color: #878585;
            margin-top: 5px;
            // border-bottom: 1px solid #efefef;
            // padding-bottom: 18px;
            .name{
                
            margin-top: 3px;
            display:inline-block;
            width: 100%;
            word-break: break-word; 
            // line-height: 1.5;
            }
            .userName{
              display:inline-block;
              width: 100%;
              word-break: break-word; 
            }
            svg{
                font-size: 14px;
            }
        }
          // 标识
      .okOrCancel{
        position: absolute;
        top: 14px;
        right: 40px;
       .isOkOrCancel{
          font-size: 45px;
       }
      }
    // ------------------
    
    }
    // 事业 
    .career{
      background-color: #F4EAC7;
      &::before{
        background-color: #F4EAC7;
      }
    }
    // 亲友
    .friend{
      background-color: #A9BDC6;
      &::before{
        background-color: #A9BDC6;
      }
    }
    // 健康
    .health{
      background-color: #BDCAAA;
      &::before{
        background-color: #BDCAAA;
      }
    }
        // 事业 已完成或者已取消的
    .career.isLight {
      background-color: #FFFAEA;
      border-color: #FFFAEA!important;
      &::before {
        background-color: #FFFAEA;
      }
      .item-title{
        h3{
          color: #A9ADA0!important;  
        }
      }
      .item-time{
        .name{
          color: #A9ADA0!important;
        }
      }
    }
    
    // 亲友 已完成或者已取消的
    .friend.isLight {
      background-color: #EAF9FF;
      border-color: #EAF9FF!important;
      &::before {
        background-color: #EAF9FF;
      }
      .item-title{
        h3{
          color: #A9ADA0!important;  
        }
      }
      .item-time{
        .name{
          color: #A9ADA0!important;
        }
      }
    }
    
    // 健康 已完成或者已取消的
    .health.isLight {
      background-color: #F6FFE8;
      border-color: #F6FFE8!important;
      &::before {
        background-color: #F6FFE8;
      }
      .item-title{
        h3{
          color: #A9ADA0!important;  
        }
      }
      .item-time{
        .name{
          color: #A9ADA0!important;
        }
      }
    }
}
.actor{
    p{
        font-size: 12px;
        color: #999;
    }
    .edit_more{
        transform: rotate(90deg);
        cursor: pointer;
    }
}
// 功能按钮
.popover-btn {
    .el-button{
        width: 100%;
        padding: 6px 0px;
        margin: 0;
        border: 0;
        &:hover{
            color: #FA7C21;
            background-color: #FFF4EB;
        }
        &:focus{
            color: #FA7C21;
            background-color: #FFF4EB;
        }
    }
}


/* 无数据 */
.noData-box{
    text-align: center;
    margin-top: 50px;
}
.noData-box img{
    width: 40%;
}
.noData-box>p{
    font-size: 12px;
    font-weight: 400;
    color: #858A91;
    margin-top: 30px;
}
// ------------列表------------end

</style>